<template>
	<div id="myChart" :style="{width: '100%', height: '300px'}">
		
		
	</div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted(){
    this.drawLine();
  	this.timeTicket();
  },
  methods: {
    drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        var option={
        	title: {
		        "text": 'CPU使用率',
		        "x": '50%',
		        "y": '45%',
		        textAlign: "center",
		        "textStyle": {
		            "fontWeight": 'normal',
		            "fontSize": 24
		        },
		        "subtextStyle": {
		            "fontWeight": 'bold',
		            "fontSize": 32,
		            "color": '#3ea1ff'
		        }
		    },
		    series: [ 
		        {
		            "name": ' ',
		            "type": 'pie',
		            "radius": ['50%', '70%'],
		            "avoidLabelOverlap": false,
		            "startAngle": 225,
		            "color": ["#9f8fc1", "transparent"],
		            "hoverAnimation": false,
		            "legendHoverLink": false,
		            "label": {
		                "normal": {
		                    "show": false,
		                    "position": 'center'
		                },
		                "emphasis": {
		                    "show": true,
		                    "textStyle": {
		                        "fontSize": '30',
		                        "fontWeight": 'bold'
		                    }
		                }
		            },
		            "labelLine": {
		                "normal": {
		                    "show": false
		                }
		            },
		            "data": [{
		                "value": 75,
		                "name": '1'
		            }, {
		                "value": 25,
		                "name": '2'
		            }]
		        }, 
		      {
		            "name": '',
		            "type": 'pie',
		            "radius": ['52%', '68%'],
		            "avoidLabelOverlap": false,
		            "startAngle": 317,
		            "color": ["#fff", "transparent"],
		            "hoverAnimation": false,
		            "legendHoverLink": false,
		            "clockwise": false,
		            "itemStyle":{
		                "normal":{
		                    "borderColor":"transparent",
		                    "borderWidth":"20"
		                },
		                "emphasis":{
		                    "borderColor":"transparent",
		                    "borderWidth":"20"
		                }
		            }
		            ,
		            "z":10,
		            "label": {
		                "normal": {
		                    "show": false,
		                    "position": 'center'
		                },
		                "emphasis": {
		                    "show": true,
		                    "textStyle": {
		                        "fontSize": '30',
		                        "fontWeight": 'bold'
		                    }
		                }
		            },
		            "labelLine": {
		                "normal": {
		                    "show": false
		                }
		            },
		            "data": [{
		                // "value": (100 - value1) * 266 / 360,
		                "name": ''
		            }, {
		                // "value": 100 - (100 - value1) * 266 / 360,
		                "name": ''
		            }
		            ]
		        }
		
		    ]
        	
        }
        myChart.setOption(option)
        
        
        var timeTicket=setInterval(function() {
		    var value = parseInt(Math.random() * 55) + 30,
		        value_ = (100 - value) * 266 / 360;
		    option.title.subtext = value + "%";
		    option.series[1].data[0].value = value_;
		    option.series[1].data[1].value = 100 - value_;
		    myChart.setOption(option, true);
		}, 1000);
//          title: { text: '在Vue中使用echarts' },
//          tooltip: {},
//          xAxis: {
//              data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
//          },
//          yAxis: {},
//          series: [{
//              name: '销量',
//              type: 'liquidFill',
//              data: [0.5, 0.4, 0.3],
//               color: ['red', '#0f0', 'rgb(0, 0, 255)']
//          }]
//				title: { text: '在Vue中使用echarts' },
//				tooltip: {},
//			    series: [{
//			        type: 'liquidFill',
//			        data: [0.5, 0.4, 0.3],
//			        color: ['red', '#0f0', 'rgb(0, 0, 255)'],
//			        itemStyle: {
//			            normal: {
//			                opacity: 0.6
//			            },
//			            emphasis: {
//			                opacity: 0.9
//			            }
//			        }
//			    }]
			
     
   }
  
  }
}
</script>

<style>
</style>